<template>
    <p>{{ state.msg }}</p>
    <button @click="state.msg = 'xxx'">update msg</button>
</template>

<script>
import {

    ref,
    onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, reactive
} from 'vue'
export default {
    setup () {
        console.log('setup')
        const state = reactive({
            msg: 'Hello World',
        })
        // onBeforeMount(() => {
        //     console.log('onBeforeMount');
        // })
        onMounted(() => {
            console.log('onMounted');
            window.timerId = setInterval(() => {
                console.log('定时器');
            }, 1000)

        })
        // onBeforeUpdate(() => {
        //     console.log('onBeforeUpdate');
        // })
        onUpdated(() => {
            console.log('onUpdated');
        })
        // onBeforeUnmount(() => {
        //     console.log('onBeforeUnmount');
        // })

        onUnmounted(() => {
            console.log('onUnmounted');
            clearInterval(window.timerId)  // 根 window 相关的属性卸载

        })

        return {
            state
        }

    }
}

</script>